<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <style>
        .grid{
            display: grid;
            grid-template-columns: 70% 30%;
            grid-template-rows: 1fr 8fr 1fr;
            height: 100vh;
            gap: 10px;
        }
        .title{
            margin: 0;
            place-items: center;
            //background-color: lightskyblue;
        }
        h1{
            color: #fff;
        }
        nav{

            display: grid;
            grid-column: 1 /-1;
            background-color: #333;
            grid-template-columns: 30% 70%;
        }
        .nav2{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            //place-items: center;
            text-align: left;
            align-items: center;
        }
        a{
            color: #fff;
        }
        .main{
            gap: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            background-color: #0056b3;
        }
        .search{
            display: grid;
            grid-template-rows: 30% 70%;
            background-color: lightcoral;
        }
        footer{
            grid-column: 1/-1;
            //background-color: lightgray;
            place-items: center;
            padding: 20px 0;
            background-color: #333;
        }
        h2{
            color: #fff;
        }
        p{
            color: white;
        }
    </style>
</head>
<body>
<div class="grid">
    <nav>
        <div class="title">
            <h1>这是何哥的博客</h1>
        </div>
        <div class="nav2">
            <a href="#">首页</a>
            <a href="#">文章</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </div>
    </nav>
    <div class="main">
        <div class="article1">
            <h2>劝学</h2>
            <span>作者：孟子</span>
            <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，𫐓以为轮，其曲中规。虽有槁暴，不复挺者，𫐓使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
        </div>
        <div class="article1">
            <h2>劝学</h2>
            <span>作者：孟子</span>
            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
        </div>
        <div class="article1">
            <h2>劝学</h2>
            <span>作者：孟子</span>
            <p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
        </div>
    </div>
    <div class="search">
        <div style="display: grid;place-items: center">
            <label>
                <input style="" type="text" name="Search">搜索栏
            </label>
        </div>
    </div>
    <footer>
        <h2>这是何哥的博客，别动歪脑筋</h2>
    </footer>
</div>
</body>
</html>